.pxToRem(@p, @px){
    @{p}: @px / 75 * 1rem;
}
body{
	background:rgb(244,244,244);
}

header{
	display:flex;
	flex-direction:column;
	background:#fff;
	position:fixed;
	left:0;
	right:0;
	.pxToRem(height, 150);
	z-index:1000;
	.top{
		.pxToRem(padding-top, 20);
		.pxToRem(padding-bottom, 20);
		.center{
			display:flex;
			align-items:center;
			flex:1;
			border:1px solid #ccc;
			.pxToRem(border-radius,30);
			color:#ccc;
			.pxToRem(padding-top, 10);
			.pxToRem(padding-bottom, 10);
			.pxToRem(margin-right, 50);
			.pxToRem(margin-left, 50);
		}
	}
	.bottom{
		display:flex;
		span{
			flex:1;
			text-align:center;
			.pxToRem(padding-top, 5);
			.pxToRem(padding-bottom, 5);
		}
	}
}
.outdoor{
	.pxToRem(padding-top,150);
	h3{
		.pxToRem(height,80);
		.pxToRem(line-height,80);
		.pxToRem(padding-left,30);
	}
	.items{
		.pxToRem(padding-left,30);
		dl{
			.pxToRem(width,360);
			.pxToRem(margin-right,10);
			background:#fff;
			img{
				width:100%;
			}
			dd{
				.pxToRem(padding-left,10);
				.pxToRem(padding-right,10);
				.pxToRem(padding-top,20);
				.pxToRem(padding-bottom,20);
			}	
		}
	}
}

.shops{
	background:#fff;
	.pxToRem(margin-top,20);
	.pxToRem(line-height,113);
	
	.left{
		float:left;
		display:flex;
		justify-content:center;
		align-items:center;
		.pxToRem(padding-left,30);
		img{
			.pxToRem(width,86);
			.pxToRem(height,90);
			.pxToRem(padding-right,10);
		}
	}
	.right{
		float:right;
		display:flex;
		justify-content:center;
		align-items:center;
		.pxToRem(padding-right,30);
		p{
			.pxToRem(width,130);
			.pxToRem(height,54);
			border:1px solid red;
			text-align:center;
			.pxToRem(line-height,54);
			.pxToRem(margin-right,20);
		}
	}
	.title{
		.pxToRem(height,113);
		border-bottom:1px solid #ccc;

	}
	.info{
		background:#fff;
		.pic{
			display:flex;
			.pxToRem(padding-left,30);
			img{
				.pxToRem(width,220);
				.pxToRem(height,210);
				.pxToRem(margin-right,10);
			}
		}
		.p1{
			.pxToRem(line-height,50);
			.pxToRem(padding-left,30);
		}
		.p2{
			.pxToRem(line-height,50);
			.pxToRem(padding-left,30);
		}
	}
	.jin{
		display:flex;
		figure{
			.pxToRem(padding-left,30);
			img{
				.pxToRem(width,127);
				.pxToRem(height,127);
			}
		}
		.info{
			flex:1;
			h3{
				.pxToRem(line-height,50);
				.pxToRem(padding-left,30);
				span{
					color:red;
					float:right;
					.pxToRem(padding-right,30);
				}
			}
			p{
				.pxToRem(line-height,50);
				.pxToRem(padding-left,30);
			}
		}
	}
}
.shops:last-child{
	.pxToRem(margin-bottom,110);
}
footer{
	display:flex;
	justify-content:space-around;
	align-items:center;
	.pxToRem(height,110);
	background:#fff;
	position:fixed;
	left:0;
	bottom:0;
	width:100%;
	dl{
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		dt{
			.pxToRem(height,50);
			.pxToRem(width,60);
			img{
				width:100%;
				.pxToRem(height,50);
			}
		}
		dd{
			.pxToRem(padding-top,10);
			.pxToRem(padding-bottom,10);
		}
	}
}
